function Point(x, y){
    this.x = x;
    this.y = y;
}

function Coordinate(context){
    context.strokeStyle = '#000000';
    // 画出x轴和y轴
    context.beginPath();
    context.strokeStyle = '#0000000';
    // 计算出x的起点和终点
    var xStrat = new Point(orgin.x, orgin.y);
    var xEnd = new Point(xStrat.x + xlen, orgin.y);
    var yStrat = new Point(orgin.x, orgin.y - Math.floor(ylen / 2));
    var yEnd = new Point(orgin.x, yStrat.y + ylen);
    context.moveTo(xStrat.x, xStrat.y);
    context.lineTo(xEnd.x, xEnd.y);
    context.moveTo(yStrat.x, yStrat.y);
    context.lineTo(yEnd.x, yEnd.y);
    context.stroke();
    context.closePath();

    // 画出y轴和x轴的箭头。
    var radians = arrowAngle * Math.PI / 180;

    var d = arrowLen * Math.atan(radians);
    context.beginPath();
    context.moveTo(xEnd.x - arrowLen, xEnd.y - d);
    context.lineTo(xEnd.x, xEnd.y);
    context.lineTo(xEnd.x - arrowLen, xEnd.y + d);
    context.moveTo(yStrat.x + d, yStrat.y + arrowLen)
    context.lineTo(yStrat.x, yStrat.y)
    context.lineTo(yStrat.x - d, yStrat.y + arrowLen)
    context.stroke();
    context.closePath();
}

function DrawSin(context){
    for (var angle = 0; angle < 360; angle ++){
        context.beginPath();
        context.fillStyle = ball.fillStyle;
        radians = angle * 2 * Math.PI/ 360;
        var y = orgin.y - Math.sin(radians) * radious;
        context.arc(angle / (360 / (xlen - arrowLen)) + orgin.x, y, ball.radious, 0, 2 * Math.PI);
        context.fill();
        context.closePath();
    }
}

function CreateCos(context){
    for (var angle = 0; angle < 360; angle ++){
        context.beginPath();
        context.fillStyle = ball.fillStyle;
        radians = angle * 2 * Math.PI/ 360;
        var y = orgin.y - Math.cos(radians) * radious;
        context.arc(angle / (360 / (xlen - arrowLen)) + orgin.x, y, ball.radious, 0, 2 * Math.PI);
        context.fill();
        context.closePath();
    }
}


function CreateTan(context){
    for (var angle = 0; angle < 360; angle ++){
        context.beginPath();
        context.fillStyle = ball.fillStyle;
        radians = angle * 2 * Math.PI/ 360;
        var y = orgin.y - Math.tan(radians) * radious;
        context.arc(angle / (360 / (xlen - arrowLen)) + orgin.x, y, ball.radious, 0, 2 * Math.PI);
        context.fill();
        context.closePath();
    }
}


function draw(context){
    context.fillStyle = '#cccccc';
    context.fillRect(0, 0, canvas2.width, canvas2.height);
    context.strokeRect(0, 0, canvas2.width, canvas2.height);


    // 坐标轴
    Coordinate(context);
    // sin曲线
    DrawSin(context);

}

function drawCos(context){
    context.fillStyle = '#cccccc';
    context.fillRect(0, 0, canvas2.width, canvas2.height);
    context.strokeRect(0, 0, canvas2.width, canvas2.height);


    // 坐标轴
    Coordinate(context);
    // cos曲线
    CreateCos(context);

}


function drawTan(context){
    context.fillStyle = '#cccccc';
    context.fillRect(0, 0, canvas2.width, canvas2.height);
    context.strokeRect(0, 0, canvas2.width, canvas2.height);


    // 坐标轴
    Coordinate(context);
    // cos曲线
    CreateTan(context);

}


function draw2(context){
    // 知道一个角度，绘制这个线。确定一个线，知道两个点就好了
    context.fillStyle = '#cccccc';
    context.fillRect(0, 0, canvas2.width, canvas2.height);
    context.strokeRect(0, 0, canvas2.width, canvas2.height);


    var angle = 30;
    // 为了方便观察，选择原点为canvas的中间
    var origin = {x: 120, y: 120};
    // 画出原点
    context.beginPath();
    context.fillStyle = 'green';
    context.arc(origin.x, origin.y, 2, 0, 2 * Math.PI);
    context.fill();
    context.closePath();

    // 半径为radious， 角度为rangle
    var radious = 50;
    var angles = [0, 30, 60, 90, 120, 150, 180, 210];

    // for (var i = 0; i < angles.length; i ++) {
    for (var i = 0; i < 360; i += 30) {

        // var radian = angles[i] * 2 * Math.PI / 360;
        var radian = i * 2 * Math.PI / 360;
        var x0 = Math.cos(radian) * radious + origin.x;
        var y0 = Math.sin(radian) * radious + orgin.y;

        // 画出这个点
        context.beginPath();
        context.fillStyle = 'red';
        context.arc(x0, y0, 2, 0, 2 * Math.PI);
        context.fill();
        context.closePath();

        // 画出这个线
        context.beginPath();
        context.strokeStyle = 'yellow';
        context.moveTo(origin.x, origin.y);
        context.lineTo(x0, y0);
        context.stroke();
        context.closePath();
    }
}

function drawAcos(context){
    // 知道线段的长度，以及x轴距离，求夹角和线段。
    context.fillStyle = '#cccccc';
    context.fillRect(0, 0, canvas2.width, canvas2.height);
    context.strokeRect(0, 0, canvas2.width, canvas2.height);


    // 为了方便观察，选择原点为canvas的中间
    var origin = {x: 120, y: 120};
    // 画出原点
    context.beginPath();
    context.fillStyle = 'green';
    context.arc(origin.x, origin.y, 2, 0, 2 * Math.PI);
    context.fill();
    context.closePath();

    // 知道线段的长度，知道x
    var x0 = 10, y0 = 110;

    // 计算角度
    var radian = Math.atan2((y0 - origin.y), (x0 - origin.x));
    var angle = radian * 360 / (Math.PI * 2);
    console.log(angle);


    // 画出这个点
    context.beginPath();
    context.fillStyle = 'red';
    context.arc(x0, y0, 2, 0, 2 * Math.PI);
    context.fill();
    context.closePath();

    // 画出这个线
    context.beginPath();
    context.strokeStyle = 'yellow';
    context.moveTo(origin.x, origin.y);
    context.lineTo(x0, y0);
    context.stroke();
    context.closePath();
}

function drawMouseMove(context){
    // 知道线段的长度，以及x轴距离，求夹角和线段。
    context.fillStyle = '#cccccc';
    context.fillRect(0, 0, canvas2.width, canvas2.height);
    context.strokeRect(0, 0, canvas2.width, canvas2.height);


    // 为了方便观察，选择原点为canvas的中间
    var origin = {x: 120, y: 120};
    // 画出原点
    context.beginPath();
    context.fillStyle = 'green';
    context.arc(origin.x, origin.y, 2, 0, 2 * Math.PI);
    context.fill();
    context.closePath();

    // 画出这个线
    context.beginPath();
    context.strokeStyle = 'yellow';
    context.moveTo(origin.x, origin.y);
    context.lineTo(point.x, point.y);
    context.stroke();
    context.closePath();
}

function mouseMove(event){
    var x = event.offsetX;
    var y = event.offsetY;
    point = {x: x, y: y};
}


var canvas = document.getElementById('canvas-sin');
var context1 = canvas.getContext('2d');

var canvas2 = document.getElementById('canvas-sin-test');
var context2 = canvas2.getContext('2d');

var canvasCos = document.getElementById('canvas-cos');
var contextCos = canvasCos.getContext('2d');
var canvasTan = document.getElementById('canvas-tan');
var contextTan = canvasTan.getContext('2d');


var canvasAcos = document.getElementById('canvas-acos');
var contextAcos = canvasAcos.getContext('2d');

var canvasMouseMove = document.getElementById('canvas-mouse-move');
var contextMouseMove = canvasMouseMove.getContext('2d');



// 直角坐标轴的原点
var orgin = {x:20, y:120};
// x轴的长度
var xlen = 200;
// y轴的长度
var ylen = 200;
// 余弦的圆半径的长
var radious = 90;
// 初始角度
var angle = 0;

// 箭头的角度。
var arrowAngle = 30;
var arrowLen = 10;

var ball = {
    radious: 1,
    fillStyle: 'green',
};

var point = null;

(function(){
    draw(context1);
    drawCos(contextCos);
    drawTan(contextTan);
    draw2(context2);
    drawAcos(contextAcos);
    point = {x: 120, y:120};
    canvasMouseMove.addEventListener("mousemove", mouseMove, false);
    // drawMouseMove(contextMouseMove);

    window.setInterval("drawMouseMove(contextMouseMove)", 10);
})();